<template>
  <div>
    <transition name="fade">
    <div class="aside" id="Aside" v-show="!viewing">
      <div class="title">
        <div class="titlebg"></div>
        <h3 class="titleword">三月十四 陈宗豪的小站</h3>
          <div class="under-title" >
            <div class="baogan">+1s +1s +1s ...</div>
          </div>
      </div>
    </div>
    </transition>
  </div>


</template>

<script>
  import bus from '../assets/js/Eventbus';
    export default {
        name: 'sider',
        data() {
            return {
            }
        },
      computed:{
          viewing(){
            return this.$store.state.viewing;
          }
      },
        methods:{
        },
        mounted(){

        },
        created(){

        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .under-title{
    position:absolute;
    width:100%;
    top:140px;
    z-index: 199;
  }
  .aside{
    background-color: #72d1fb;
    overflow: hidden;
    color: #fff;
  }
  .baogan{
    font-weight: 800;
    font-size: 20px;
    /*margin:90px;*/
  }


  tr,th{
    height:20px;
    width:35px;
  }
  td{
    font-size:9px;
    /*color:black;*/
  }
  .aside {
    background-color: #fff;
    color: #000000;
    z-index: 100;
    position:absolute;
    top:60px;
    left:calc(50% - 620px);
    height:300px;
    /*transform: translate(-50%,0);*/
    border-radius: 5px;
    width:350px;
    text-align: center;
    line-height: 25px;
    cursor:default;
  }
  h3{
    color:white;
  }
  .titlebg{
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
    border-radius: 5px 5px 0 0;
    width:100%;
    height:60px;
    background: #76b0fb;
  }

  @media (max-width: 768px){
    .aside{
      display:none;
    }

  }
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
